Елена Булыгина предлагает Вам запомнить сайт «Ленусик»
Вы хотите запомнить сайт «Ленусик»?
Да Нет
×
Прогноз погоды

Основная статья: Ui дизайн

10 направлений дизайна с практической пользой

Для многих людей, далеких от творческих профессий, дизайнеры, художники и все прочие поэты живут в своем мире, оторванном от реальности, не делают ничего «дельного» и, чего уж греха таить, вообще паразитируют на теле общества.  Но на самом деле, в отличие от поэтов и художников, дизайнеры всегда решает конкретную, осязаемую задачу. Эта статья поможет выбрать такое направление в дизайне в зависимости от того, что вам нравится.

UX/UI-дизайн

Начнем с дизайна пользовательского опыта / пользовательских интерфейсов (User eXperience / User Interface). Эти два направления часто ставят вместе, но некоторая разница между ними все-таки есть. Цель UX-дизайна — развивать взаимодействие пользователя с продуктом так, чтобы росло удовлетворение пользователя, а вместе с ним и его лояльность продукту. Формулировка очень обтекаемая, но она четко выражает суть термина. UX-дизайн применим во всех сферах жизни, в отличие от UI-дизайна, который все-таки относится к цифровым продуктам. UI-дизайн сконцентрирован на самом продукте.

Обладатель премии UX Design Awards 2019 года — бимодальное слуховое решение, управляемое с помощью смартфона 

В статье Хельги Морено, посвященной разнице между UX- и UI-дизайном, есть хорошее сравнение: «Если что-нибудь выглядит здорово, но им сложно пользоваться — это признак хорошего UI и плохо UX. Если пользоваться легко, но на вид это ужасно — мы имеем дело с хорошим UX и недоработанным UI».

Кстати, сегодня мы как раз запустили новый факультет GeekUniversity — UX/UI-дизайн. Но об этом мы еще напомним — давайте продолжим рассказ о других «полезных» направлениях дизайна.

Промышленный дизайн

Пример интересного индустриального дизайна

Это дизайн любых материальных изделий — от чашек до летательных аппаратов. Основная цель промышленного дизайна — сделать производимые объекты удобнее в использовании, эстетичнее и при этом сократить расходы на их изготовление. Если вы можете посмотреть на привычную вещь, обнаружить в ней слабые места и придумать, как ее улучшить, то стоит попробовать себя в промдизайне. Особенно если вас воодушевляет мысль, что идея из вашей головы материализуется и будет приносить пользу людям.

Веб-дизайн

Когда веб-дизайнер добавляет пространства между элементами

Задача веб-дизайнера — донести информацию пользователю. Специалисту нужно продумать логическую структуру сайта или приложения и выбрать оптимальное художественное оформление. Если на сайтах вас часто возмущают визуальные недочеты и вы знаете, как сделать гармоничнее и удобнее, — попробуйте себя в этом направлении.

Графический дизайн

Примеры логотипов в зависимости от свойств, которые нужно передать

Графический дизайнер налаживает общение бизнеса с клиентами с помощью визуальных средств. Например, один и тот же текст, написанный разными шрифтами, может создать у потенциальных клиентов разное первое впечатление о бренде: представить его как премиальный или, наоборот, предлагающий доступные по цене товары. Разработка айдентики, логотипов, баннеров и упаковок — все это задачи графического дизайнера. Если вы умеете передавать смысл емкими и лаконичными решениями, доносить идеи с помощью образов, можете быстро генерировать ассоциации — стоит попробовать себя в графическом дизайне.

Гейм-дизайн

Прекрасный мир Skyrim, созданный гейм-дизайнерами

Гейм-дизайн — все, что касается формы и содержания игр: создание правил игры, персонажей, миссий, загадок, уровней. Если вы с детства увлекались фантастикой, хотите воплощать магию в жизнь, создавая мифических персонажей или целые миры, — попробуйте себя в гейм-дизайне.

Архитектурный дизайн

Традиционная архитектура в Голландии

Задача архитектора — спроектировать здания, на которые приятно смотреть и в которых удобно жить или работать. Вас вдохновляют масштабные задачи и нравится думать, что ваши творения будут приносить людям пользу десятилетиями, а то и веками? Нравится мысль, что вы будете влиять на облик городов? Интересуетесь урбанистикой и можете оценить каждую деталь архитектурного решения (например, высоту бордюра у тротуара) по практичности, а не только по внешнему виду? Можете не только изобразить здание на бумаге, но и представить его «в жизни», примерив к потребностям каждого из будущих гостей или обитателей? Если такие задачи отзываются желанием взяться за дело — смело развивайтесь в архитектурном дизайне.

Дизайн интерьеров

Когда решил сэкономить на услугах дизайнера

Дизайнер интерьеров делает так, чтобы в помещениях было приятно и комфортно находиться. Он создает в них атмосферу, которая настраивает людей на нужный лад. Если вам нравится такая миссия и вы можете гармонично вместить максимум функциональности в минимум квадратных метров — пробуйте себя здесь!

Световой дизайн

Световой дизайн фар Audi

На первый взгляд это направление может показаться излишеством. Но у светового дизайнера сложная задача и важная миссия: он должен сделать освещение приятным и обеспечить нужный психоэмоциональный эффект — например, повысить трудоспособность или, наоборот, создать расслабляющую атмосферу. А при этом еще максимально сэкономить на электроэнергии.

Вам нравится играть со светом и вы знаете, как с его помощью выгодно подать любой объект? Вы видите магию света всюду — на фотографиях, в кино, в музеях, театрах и ресторанах? Развивайте свой талант в световом дизайне.

Ландшафтный дизайн

Сад камней

Ландшафтный дизайн — не просто садоводство, а настоящее искусство на пересечении архитектуры, ботаники и философии. Дизайнер сочетает эти три аспекта в зависимости от того, как будет использоваться территория, которую он облагораживает. Вы цените гармонию и единение с природой? Можете разглядеть в композиции сада камней послание в духе традиционного японского символизма? Вероятно, вам придется по душе ландшафтный дизайн.

Экологичный дизайн

Зеленый дизайн в Сиднее

Основная задача экологичного дизайна — восстановить контакт человека с природой. Использование натуральных материалов, экономичное потребление ресурсов, безвредность для окружающей среды — базис этого направления. Если вам хочется видеть зеленое будущее планеты, то стоит попробовать себя в экодизайне.

В GeekUniversity вы можете освоить различные виды дизайна. Есть как «общий» факультет, так и специализированные — веб-дизайн, графический дизайн, дизайн интерьера. И, как уже было сказано в начале, сегодня открылся еще и факультет UX/UI-дизайна, где за один год обучения вы освоите все навыки специалиста уровня middle и разработаете портфолио для дальнейшего трудоустройства.

Пройти обучение

6 ноя 19, 21:21
0 0
Статистика 1
Показы: 1 Охват: 0 Прочтений: 0

Онбординг: как знакомить пользователей с сайтом

Наверняка вам знакома такая ситуация: пользователи посещают ваш сайт или веб-приложение, просматривают его до определенного момента, после чего закрывают вкладку и уходят навсегда. 

Конечно, причин для такого поведения может быть множество. Пользователю может не понравиться дизайн вашего продукта, его может не устроить цена на услуги, а информация — показаться неполной. Однако бывает и так, что уходит определенно «ваш» клиент: не потому, что его не заинтересовало ваше предложение, а потому, что первое впечатление от вашего сервиса оставило его разочарованным. В этом случае мы говорим, что главным фактором потери клиента стал неправильно настроенный, плохой или вовсе отсутствующий онбординг. 

Как же избежать подобных ситуаций и не отпугнуть клиентов после их первого контакта с вашим продуктом?

Онбординг — что это и зачем он нужен?

Онбординг (англ. onboarding — «введение, размещение, адаптация») — это термин, который уже достаточно распространен в сфере HR и означает механизм, с помощью которого новые сотрудники приобретают необходимые знания и навыки для эффективной работы в компании. Для рекрутеров данный процесс обычно подразумевает совокупность лекций, презентаций и обучающих программ — все то, что может помочь новичкам быстрее освоиться на рабочем месте и влиться в жизнь организации.

Примерно та же ситуация происходит, когда мы говорим о знакомстве пользователей с технологиями и новым программным обеспечением. Здесь онбординг означает виртуальное сопровождение и поддержку новых пользователей на каждом этапе пути. Когда посетитель впервые попадает на сайт и решает ознакомиться с ним, именно от грамотно настроенного онбординга зависит то, станет ли этот человек клиентом сервиса, научится ли он пользоваться продуктом — или уйдет, так и не разобравшись, что же ему пытались предложить.

 

Но разве новый пользователь не может разобраться с навигацией сайта или функциями приложения самостоятельно, методом проб и ошибок? Правильный ответ: нет.

С каждым годом интернет-сервисы становятся все сложнее, их используют для совершенно разных целей: от покупки и продажи товаров до управления бизнесом и финансами. Конкуренция на рынке услуг становится все выше, а привлечение клиентов — дороже. Соответственно, чем быстрее посетитель сайта адаптируется к его интерфейсу, узнает о его возможностях — тем выше вероятность, что он совершит целевое действие и будет обращаться к тому же продукту в будущем. Что совершенно недопустимо — так это бросать пользователя в «пустом» пространстве сайта, не объяснив, какие шаги ему следует предпринять для эффективной работы.

Помните: нужно не просто рассказать новому пользователю о продукте, а наиболее простым способом донести то, как он сможет удовлетворить свою боль и решить свои проблемы с помощью продукта.

Инструменты онбординга

Теперь, когда мы немного разобрались с терминологией, перейдем к анализу инструментария, которым может располагать онбординг — от наиболее популярных и частых решений до не совсем очевидных.

Всплывающие подсказки (Tooltips) 

Самый распространенный элемент онбординга пользователей, который активно используется при работе и с веб-сайтами, и с мобильными приложениями, и с программным обеспечением в целом — это всплывающие подсказки. Каждый пользователь ПК хотя бы раз сталкивался с таким типом подсказок, вспомните хотя бы Скрепыша:

 

Первый интерактивный помощник от Microsoft Office

Более современный пример подсказок на сайте:

Подсказки от Facebook

Всплывающие окна (Pop-up) 

Инструмент, который нередко используется на сайтах как эквивалент подсказок — это popup-окна, всплывающие над всей страницей. Они преследуют ту же цель, что и тултипы — тем не менее, злоупотреблять этим инструментом не стоит, так как поп-апы зачастую отвлекают пользователей от работы с сайтом или кажутся чересчур навязчивыми.

Интерактивные туры

Тур по продукту — это совокупность сразу нескольких всплывающих подсказок и/или попап-окон, которые появляются по мере продвижения пользователя по сайту и могут переключаться при помощи кнопки «Далее». Обычно, если пользователю не нужна подобная «экскурсия», он может отключить интерактивный тур, нажав на крестик (некоторые сайты используют кнопку «Все понятно!»). Иногда в этот инструмент также входит вступительный видеоролик с пояснениями о функционале интернет-ресурса.

Тур по панели инструментов 

Обучающий видео-ролик, встроенный в попап-окно

Пустые состояния 

Этот неочевидный инструмент буквально представляет собой пустую интернет-страницу: это может быть альбом, в который пока не добавлены фотографии, стена в социальной сети, где еще нет записей, страница ошибки, когда по запросу пользователя не удалось найти ответа. Однако эту пустоту можно выгодно использовать, если заменить ее призывом пользователя к действию: «Упс, здесь пока ничего нет... Создайте свой проект!»

 

Пример пустого состояния

Шкалы прогресса 

Шкала прогресса встречается в мобильных приложениях чаще, чем на веб-сайтах, однако также может быть довольно эффективным методом онбординга. Она показывает пользователю, какую часть работы с сайтом он уже проделал — и мотивирует его на дальнейшие свершения:

 

Шкала прогресса рекрутингового сайта 

Рассылки (или Lifecycle-рассылки) 

Данный инструмент отличается от предыдущих тем, что он не встроен непосредственно в интерфейс сайта, но тем не менее играет значительную роль в онбординге пользователей.  Lifecycle-рассылка — это цепочка писем, обучающих пользователя эффективной работе с продуктом:

Пример обучающего письма от конструктора сайтов

Как настроить онбординг под пользователя?

Подсказки и интерактивные туры — это хорошо. Но для того, чтобы они сработали и привели к желаемому результату, необходимо на этапе настройки онбординга ответить на следующие вопросы:

  • На какую аудиторию рассчитан продукт?
  • Какую проблему пользователя должна решить работа с ним? 
  • Какой цели пользователь хочет достичь в итоге?

Посетители приходят на сайт, потому что они предполагают найти на нем нужную информацию, получить услугу или инструмент. Однако запросы пользователей отличаются в зависимости от их сферы деятельности, возраста, интересов, потребности в продукте (единоразовое взаимодействие / регулярная работа с продуктом) и т.д. Следовательно, для того, чтобы грамотно настроить онбординг, понадобится собрать максимально подробные данные о клиентах. Здесь помогут открытые опросы, тестирования и фокус-группы. В итоге нужно представлять, какой путь будет проходить пользователь от первого взаимодействия с ресурсом до полного погружения в работу. 

Неуместные или чересчур банальные подсказки (например, «Нажмите кнопку «Загрузить файл», чтобы загрузить файл») не помогут пользователям, а, напротив, запутают их или вызовут отторжение. Также не следует перегружать сайт всплывающими окнами, стрелочками и прочими отвлекающими объектами — онбординг должен дополнять страницу, с который работает пользователь, а не усложнять интерфейс еще сильнее. В противном случае, внимание потенциального клиента рассеется, и он уйдет с сайта, не сумев добраться до нужной ему цели.

Примеры сайтов с хорошим онбордингом пользователей

Duolingo — это бесплатная платформа для изучения иностранных языков, которая известна по всему миру. Ее онбординг включает в себя не только знакомство с функционалом сайта или мобильного приложения — в процессе прохождения интерактивного тура пользователь должен указать свои сферы интересов, потребности и цели. Это позволяет платформе обеспечить индивидуальный подход и составить эффективную учебную программу:

    

 

Pinterest (Пинтерест) — это фотохостинг, где пользователи могут добавлять изображения в свои онлайн-коллекции, составлять собственные тематические «доски» и делиться идеями. Онбординг в данном случае обучает пользователей работе с платформой и определяет сферы их интересов, чтобы подобрать нужный контент:

 

Онбординг поверх сайта

Самая большая сложность, возникающая при настройке онбординга пользователей, заключается в том, что этот процесс требует немалых затрат. Ведь на разработку сайта и так уже было потрачено много человеко-часов на разработку — а теперь нужно еще и настраивать онбординг на основе потребностей клиентов. Ситуацию усугубляют обновления продукта и появление в нем новых функций, новых разделов на сайте.

Здесь есть решение, которое не потребует особых дополнительных затрат — онбординг не в структуре самого сайта, а «поверх» него. Как, например, у Experrto.io —  конструктора интерактивных подсказок, который не требует знаний верстки, дизайна и программирования. 

Experrto представляет собой расширение для браузера Google Chrome и состоит из редактора и личного кабинета. С его помощью можно создавать всплывающие подсказки, прикреплять их к нужным элементам интерфейса, а также анализировать, насколько успешно пользователи продвигаются по составленному для них сценарию —  видеть количество запусков онбординга, завершения каждого шага и итоговую конверсию:

Статистика онбординга в личном кабинете Experrto

Расширение доступно в интернет-магазине Google, и, пока оно находится в стадии открытого тестирования, его можно попробовать бесплатно.

Подведем итоги

Учитывая уровень, на который вышли интернет-сервсиы сегодня, без онбординга обойтись сложно. К сожалению, универсального решения здесь не существует — приходится учитывать множество факторов и особенностей в зависимости от специфики каждого сайта и его целевой аудитории. Можно потратить ресурсы на дополнительную разработку туров, всплывающих окон и подсказок, но, скорее всего, на старте проекта, в условиях ограниченных бюджетов, будет разумнее распределить ресурсы иначе и попробовать воспользоваться готовым решением вроде Experrto. Конечно, выбирать свой путь нужно в зависимости от конкретных обстоятельств; главное — помнить о том, как сегодня важно умение встретить пользователя на своем ресурсе.

Онбординг — это лишь одна из множества важных тем, в которых необходимо разбираться современному веб-дизайнеру. Для того, чтобы все системно изучить, будет полезно пройти полноценный курс — например, на факультете веб-дизайна GeekUniversity. Новый поток начнется в ближайшие дни — отличная возможность не откладывать в долгий ящик ;)

Пройти обучение

25 окт 19, 17:18
0 0
Статистика 1
Показы: 1 Охват: 0 Прочтений: 0

UI-дизайн: начало пути и штурм больших заказов

Виталий Асташкин, психолог по образованию, после вуза работал педагогом-организатором. Когда захотел перемен — освоил дизайн интерфейсов в GeekBrains и начал фрилансить. Сейчас у Виталия за плечами несколько проектов для крупных заказчиков, таких как концерн «Калашников», Уральский вагоностроительный завод и правительство Республики Удмуртия.

— Виталий, первый вопрос о том, чем вы сейчас занимаетесь. В каких стартапах и над какими проектами работаете?

— Сейчас я совмещаю две профессии: днем — педагог, ночью — дизайнер. Что касается дизайна, участвую в нескольких проектах параллельно, работаю в стартапах и на фрилансе.

В одной команде мы создаем виртуальную химическую лабораторию: с помощью VR-очков и контроллера вы можете проводить химические опыты.

Дизайн периодической системы химических элементов. Таблица распечатывается и считывается камерой смартфона для получения дополнительной информации в AR

В другой команде — разрабатываем мобильное приложение для продажи одежды. Пользователь задает параметры: размер, цветотип и другие, — а программа показывает только подходящие модели.

Карточка товара в приложении для подбора одежды FitsMe 

— Расскажите о крупных проектах, в которых участвовали: для концерна «Калашников» и Уральского вагоностроительного завода. 

— Для «Калашникова» я готовил интерфейс AR-приложения, которое показывает на карте мира пути поставок продукции и сведения о заводах концерна. 

Для Уральского вагоностроительного завода — создал интерфейс интерактивного экрана, знакомящего зрителей с историей завода, техническими характеристиками продукции, фотогалереей и другими материалами.

Экран с информацией о поезде. Проект для Уралвагонзавода

— Где можно посмотреть примеры ваших работ?

— Когда плотно занялся дизайном, начал понимать все эти разговоры о портфолио: мол, когда уходишь в работу, забываешь его пополнять. Однако стараюсь постоянно выкладывать хотя бы шоты челленджей на Dribbble

Кстати, свой первый серьезный заказ я получил именно благодаря аккаунту на Dribbble. Скинул свой профиль, выполнил тестовое задание — и за работу!

— Сколько времени вам понадобилось, чтобы выйти на профессиональный уровень в дизайне: с момента, когда вы начали целенаправленно этим заниматься, и до оплачиваемого заказа? Насколько легко или трудно было найти первую работу?

— В GeekBrains я учился с января по май 2018 года. После этого проходил бесплатную практику в реальном проекте: мы разрабатывали приложение для путешественников. К сожалению, проект так и не добрался до релиза, но я получил опыт работы в команде.

Где-то с августа 2018 я начал выполнять первые небольшие заказы от друзей и знакомых. К маю 2019 года — взял первый крупный заказ.

Самое сложное — когда кажется, будто ничего не знаешь и не умеешь. Вроде отучился, а открываешь тот же Dribbble, смотришь на все это великолепие и думаешь: «А вот я так не могу». Однако не стоит бояться!

В одном чате для дизайнеров искали желающих сделать интерфейс для AR-приложения. Я собрался с духом и вызвался одним из первых. Так я познакомился с ребятами из BoxGlass — команды, которая как раз готовила приложение для концерна «Калашников». 

С тех пор я с ними сотрудничаю на регулярной основе. Мы реализовали несколько интересных проектов, в том числе приложение для посетителей инвестфорума — по заказу правительства Республики Удмуртия. Через очки виртуальной реальности пользователь осматривает 360-градусную панораму здания, где можно увидеть этапы строительства, почитать инфографику.

Инфографика для панорамы 360°

— Какие знания и навыки надо обязательно получить перед тем, как искать работу в сфере дизайна интерфейсов?

— На старте надо владеть программами для прототипирования: например, Figma, Sketch, Axure. Конечно, эскизы приложения можно набросать и на листочке, но собранный в Figma интерактивный прототип будет куда информативнее и привлекательнее для заказчика.

Для подготовки иллюстраций, иконок и сложной графики пригодится Adobe Illustrator.

Для работы с растровой графикой — Photoshop. К слову, некоторые заказчики до сих пор просят исходники в формате .psd.

Надо знать основы типографики, композиции, теории цвета, постоянно обновлять знания по теории интерфейсов и следить за тенденциями. В этой сфере непрерывно идет развитие, все меняется: сегодня скевоморфизм, завтра — флэт.

Вообще, чем больше у вас знаний в разных областях, тем лучше. Знакомы с HTML хотя бы на самом базовом уровне? Хорошо. Знаете, что такое Native React? Прекрасно. Прочли книги по копирайтингу? Отлично! 

Текст — неотъемлемый элемент дизайна и интерфейсов. При подготовке макетов, чтобы не вставлять «рыбу» текста или фразы вроде «тут будет заголовок», полезно уметь формулировать ключевые мысли. 

Мне мой внутренний редактор не позволяет делать заголовки в духе «самый атличный прадукт, несомненно, на рынке». Тут и банальная грамотность нужна, и хоть какое-то понимание основ работы с текстом.

Нет предела совершенству: каждый проект чему-то учит, заставляет изобретать.

— С чего начался ваш путь в дизайн? Когда вы решили, что это всерьез и нужно получать дополнительное образование? 

— Путь начался еще в старшей школе, когда я делал афиши для мероприятий подросткового клуба. Позднее начал изучать веб и запустил городской портал. Даже делал макеты баннеров для местной лиги КВН. Не обошло меня и создание аватарок для групп «ВКонтакте» :)

Чтобы заниматься всем этим, я читал статьи, шерстил форумы, смотрел обучающие видео. Так у меня накопился большой массив разрозненных и обрывочных знаний, которые годились под конкретные задачи, но не складывались в общую картину. Я решил, что пора все структурировать, «узаконить» и превратить в новую профессию.

— Почему выбрали именно UI, а не другие направления?

— Мне это просто-напросто интересно. А когда интересно, легче учиться и работать. К тому же дизайн интерфейсов — широкая область знаний, связанная с разными IT-направлениями.

— Расскажите немного о жизни до учебы в GB. Почему после вуза вы решили стать педагогом и до сих пор не хотите расставаться с этой профессией?

— Я окончил МЭИ по специальности «Психология». Еще во время учебы в вузе работал с подростками в молодежном клубе. Вскоре после получения диплома я нашел вакансию педагога в лицее в Звенигороде. Предложение оказалось более привлекательным, чем то, что можно было найти у нас в Краснозаводске, и я переехал. 

Не было такого, чтобы я решил для себя «После вуза стану педагогом!». Это был естественный ход событий. 

Общение с учениками позволяет оставаться в тренде. Я в курсе, что они слушают и смотрят, за чем следят. Они без стеснения делятся своими мыслями, и, считаю, у них можно чему-то научиться.

— Как вам удается совмещать две работы: педагога и дизайнера? Как обычно выглядит рабочий день?

— Подъем, душ, завтрак — и в путь. Живу я неподалеку от работы, и это несомненный плюс. По возвращении домой, после перерыва и прогулки, превращаюсь в дизайнера. Помогает самоорганизация: свои проекты я веду в Trello, где отслеживаю загруженность, сроки и общий объем задач. 

Стараюсь в один вечер заниматься одним проектом, не отвлекаясь на другие. Это позволяет лучше сконцентрироваться и погрузиться в работу.

Важно оценивать свои силы, чтобы не работать на износ и не выгореть. Поэтому я обязательно устраиваю себе выходные, когда не занимаюсь вообще ничем, связанным с дизайном.

Но у меня нет строгого распорядка дня в ежедневнике — могу позволить себе неожиданно сорваться на встречу с друзьями. При этом всегда помню о деле и думаю, как организовать время, чтобы не подвести заказчика и сдать работу в срок.

Прототипирование приложения для подбора авточехлов

— Какими были ожидания от учебы в GB и насколько они оправдались? Какие приобретенные знания и навыки считаете самыми ценными?

— До изучения профессии «Дизайнер интерфейсов» я проходил разные курсы, смотрел вебинары. Мне понравились новогодние скидки в канун 2018, и я решил, что пора действовать. Можно сказать, что тогда я преодолел психологический порог — границу, которую надо перейти, чтобы изменить себя и свою жизнь.

Самым ценным в обучении для меня была обратная связь от преподавателей. Они всегда шли на контакт, отвечали на вопросы, подсказывали и советовали. У них богатый опыт, и они охотно им делятся.

 — Вам в дизайнерской работе доводилось осознанно, специально применять свои знания в области психологии?

— Не скажу, что каждому дизайнеру непременно надо знать психологию. Нет. Лично мне вуз помог воспитать структурированный подход к решению задач. И, конечно, знание психологии полезно в общении с заказчиками. 

Важно помнить, что у каждого своя картина мира: если для одного человека «собачка» — это пекинес, для другого — замок на застежке-молнии. Не надо стесняться задавать наводящие вопросы и уточнять у клиента, что он имеет в виду. Например, он говорит: «Кнопка недостаточно агрессивна». Что это значит? Надо сделать ее более крупной? Изменить ее цвет или форму? Львиную долю вопросов можно снять простым уточнением.

— Как вы себе представляете карьеру в дизайне? Куда собираетесь расти и как развиваться дальше?

— Сейчас мне нравится работать в разных командах, над разными проектами. Возможно, попробую себя в какой-нибудь студии, но на данный момент фриланс позволяет заниматься именно теми проектами, которые интересны мне.

Планирую углубиться в UX, поведение и паттерны. Главное — не останавливаться.

— Спасибо, что поделились историей, примерами работ, наблюдениями. Успеха вам в профессии и творчестве!

Пройти обучение

11 сен 19, 08:33
0 0
Статистика 1
Показы: 1 Охват: 0 Прочтений: 0

Как изучить четыре профессии на одном факультете GU?

Чему и как будут учить на новом факультете дизайна в GeekUniversity? Кем смогут работать выпускники? На вопросы отвечает Марине Мкртчян, руководитель образовательного направления «Дизайн» в GeekBrains.

— Марине, привет! Чем факультет дизайна в GeekUniversity отличается от профессий по направлению «Дизайн» в GeekBrains?

— В дизайне есть специализации: веб-дизайнер, графический дизайнер, продуктовый, дизайнер интерфейсов. Но на практике придерживаются такого деления только крупные компании. Когда мы анализировали рынок дизайнеров — открытые вакансии, требования к кандидатам, перечень задач, — поняли, что работодатели чаще ищут специалиста, который закроет все потребности бизнеса.

Дизайнер должен уметь и сайт подготовить, и креативы для социальных сетей сделать, и сверстать печатные материалы, если потребуется. Поэтому GeekUniversity ставит перед собой цель подготовить «универсальных солдат» дизайна. Это отличает факультет от курсов, которые готовят узкопрофильных специалистов.

Как построено обучение на факультете?

— Мы взяли лучшие образовательные практики и на их основе составили учебный план. Четырнадцать месяцев обучения мы разделили на пять этапов. Первые два закладывают профессиональный фундамент: студенты изучают графический дизайн и академический рисунок, учатся понимать рекламную среду, в которой обычно живет дизайн.

Третий и четвертый этапы — погружение в веб-дизайн. По ходу обучения студенты двигаются от простых задач (создание лендинга) к сложным, требующим погружения в продукт и аналитику (работа над сервисами). На пятом этапе — итоговая работа по заданиям от Delivery Club, Maps.me и других проектов в рамках Mail.ru Group.

Преподавание у нас опирается на принципы андрагогики — науки об обучении взрослых. Мы учитываем особенности наших студентов: им важно влиять на учебный процесс наравне с преподавателем, достигать поставленных целей и сразу на практике применять полученные знания. Уже на первом этапе взрослый должен видеть цель и понятные шаги к ее достижению. Поэтому разработку любых учебных материалов мы начинаем с целеполагания.

Четырнадцать месяцев — срок немалый. Почему именно столько?

— Кому-то может показаться, что это очень долго — в интернете полно курсов, которые обещают сделать тебя дизайнером за два-три месяца. Мы считаем, за такое время можно только рассмотреть очертания профессии, но никак не освоить ее.

Как учится человек, если верить таксономии Блума? Сначала ты узнаешь о существовании чего-то, например графического редактора Figma. Это «Знание» — этап, когда ты видишь, что есть вот такой прекрасный редактор с вот таким интерфейсом.

Вторая ступень — «Понимание». Ты знаешь, что именно можно делать в редакторе, и примерно догадываешься как.

Следующий уровень — «Применение». Ты создаешь первую учебную работу, запоминаешь горячие клавиши и начинаешь ими пользоваться, глубже изучаешь функции редактора. На этом этапе дизайнеры могут копировать существующий дизайн.

Четвертая ступень — «Анализ» своей деятельности. «А что если я изменю правила игры и вместо шаблонного интерфейса нарисую свой собственный?». «Как дизайн можно увязать с аудиторией бренда, на который я работаю?». Когда ты задаешь себе эти вопросы и можешь на них ответить, ты — на четвертой ступени.

Сразу прыгнуть с первой на четвертую ступень нельзя: каждую надо «прожить», а это займет больше трех-четырех месяцев. Мы хотим, чтобы выпускники факультета умели не только копировать удачные дизайн-решения, но и создавать свои. А для этого нужны обширные знания и навыки. Поэтому за программой каждой учебной четверти — серьезная методологическая база, над которой работают наши методисты и преподаватели.

К слову о преподавателях, кто они?

— GeekBrains — часть Mail.ru Group, и преподавателей факультета мы подбирали прежде всего из дизайнеров компании. Декан — Артем Фенелонов — арт-директор Mail.ru Group. Но мы не ограничиваемся опытом одной организации. Чтобы студенты видели мир дизайна со всех сторон, у нас преподают владельцы дизайн-студий, успешные фрилансеры, дизайнеры из небольших компаний.

Расскажи о «T-модальной системе компетенций», упомянутой на странице факультета. Что это такое и зачем это дизайнеру?

— Давно идет спор, должен ли человек быть узкопрофильным специалистом или, наоборот, иметь широкое представление о разных сферах, не погружаясь в них глубоко. Аргументы есть и за первый подход (мастерски можно делать что-то одно), и за второй (широкое понимание позволяет стратегически подходить к задачам). Т-модальная система обучения призвана формировать и глубину, и широту знаний.

Для дизайнера это особенно важно, потому что дизайн не существует в вакууме. Есть пользователи, которым должно быть удобно. Есть бизнес, который хочет, чтобы дизайн помогал достигать целей. А еще есть разработчики, которые страдают, если дизайнер не понимает, что происходит потом с его макетами. Есть менеджеры, маркетологи и аналитики, которые используют дизайн дальше. Когда понимаешь всю инфраструктуру, проще создавать дизайн, который работает и справляется со своими задачами.

Кто может учиться на факультете?

— Для поступления не нужна подготовка: мы учим людей с нуля, в какой бы области они ни работали раньше.

Записаться на обучение можно прямо сейчас.

Пройти обучение

15 апр 19, 17:40
0 0
Статистика 1
Показы: 1 Охват: 0 Прочтений: 0

Что делает мобильную версию сайта привлекательной?

Один из наших читателей, Александр Морозовас, перевел статью Дженни Гоув “What Makes a Good Mobile Site?”. Предлагаем его перевод вашему вниманию.

Те, кто заходят на сайт с мобильных устройств, хотят быстро найти то, что им нужно. Google и AnswerLab провели исследование, чтобы понять, что делает мобильную версию сайта удобнее и привлекательнее для пользователей.

Участники исследования тестировали мобильные версии сайтов на своих устройствах iOS и Android, оформляя покупки в интернет-магазинах или бронируя отели. После выполнения этих заданий они рассказывали о своих впечатлениях от мобильных версий.

Домашняя страница и навигация по сайту

Домашняя страница должна давать пользователям именно тот контент, который они ищут.

Пользователи должны видеть call-to-action в центре страницы

Сделайте самые важные задачи легко доступными — поместите их на первый экран. Второстепенные задачи уберите в меню или сделайте доступными в прокрутке. Но не стоит тратить драгоценное место на первом экране на абстрактные призывы к активности — например, «Узнать больше».

Сделайте меню коротким и удобным

Пользователи не желают пролистывать длинный список функций, чтобы найти необходимое. Пусть меню будет практичным. Организуйте его так, чтобы пользователи могли использовать несколько самых важных функций.

Сделайте простым возврат к домашней странице

Пользователи ожидают попасть на домашнюю страницу сайта, когда нажимают на логотип в левом верхнем углу страницы. Они часто покидают сайт, когда эта функция не реализована или некорректно работает.

Не позволяйте рекламным баннерам скрывать контент

Акции следует подавать так, чтобы контент и юзабилити сайта не страдали. Промежуточные баннеры, предлагающие скачать приложение, сделать заказ и получить скидку, раздражают. Особенно, если это полностраничные баннеры, которые закрывают контент. Они усложняют работу с сайтом с мобильного телефона.

Сделайте поиск по сайту заметным

Посетители сайта ищут информацию, используя поисковую строку. Поэтому она должна быть видна на экране сразу же. Не прячьте ее в меню.

Убедитесь, что результаты поиска по сайту релевантны ожиданиям пользователя

Пользователи устают просматривать множество результатов, чтобы найти то, что они ищут, и покидают сайт. Сделайте их жизнь проще: настройте автозаполнение поисковых запросов, корректирование опечаток, предлагайте связанные запросы.

В примере слева поиск реализован грамотно: показываются только детские вещи (пользователь делает поисковый запрос в интернет-магазине детской одежды). Справа — пример неудачно реализованного поиска: он показывает все, где есть слово «дети».

Разработайте фильтры для простых запросов

Пользователи полагаются на фильтры, чтобы найти то, что нужно, и отказываются от сайтов, где нет фильтров. Расположите фильтры над поисковой строкой. Помогите пользователям и покажите количество результатов заранее.

Покажите пользователям, как правильно делать поисковые запросы

Если интересы ваших клиентов могут лежать в диаметрально разных плоскостях, задайте им пару вопросов, прежде чем показывать поисковое поле. Используйте ответы клиента как фильтры поискового запроса, чтобы обеспечить пользователям нужные им результаты.

Коммерция и конверсия

Поймите, куда хочет попасть и что там найти ваш клиент, и помогите ему в этом.

Позвольте пользователям просматривать сайт до регистрации

Участники исследования были недовольны, когда сайт требовал регистрации для просмотра содержимого, особенно если бренд был им незнаком. Информация о клиенте может быть очень важной для вашего бизнеса, но если запросить данные слишком рано, вы рискуете потерять доверие клиента и получить меньшее количество регистраций, чем рассчитывали.

 

Создайте для пользователей возможность использовать гостевые аккаунты

Пользователям не нравятся сайты, которые обязуют их регистрироваться, когда делаешь любой запрос, особенно когда выгода от аккаунта не понятна (как это бывает на раннем этапе знакомства с ресурсом). Но вы можете упростить для них задачу, предоставив возможность создать гостевые аккаунты.

 

Используйте существующую информацию о пользователе для его удобства

Настройте автозаполнение полей для зарегистрированных пользователей.

Используйте кнопки с призывом позвонить для комплекса задач

Часто в мобильных версиях сайта используется кнопка с призывом позвонить, при клике на которую девайс пользователя набирает номер компании. Гораздо удобнее, когда пользователи получают возможность подтвердить звонок перед тем, как номер был набран, или выбрать в меню способ вызова.

Сделайте простым переключение между устройствами

Иногда пользователи хотят, например, увидеть вещь на большом экране или подумать и завершить покупку позже. Упростите им переход между устройствами, например, дайте возможность легко переслать точную ссылку в соцсетях или по электронной почте.

Форма ввода

Обеспечьте удобные переходы между формами.

Сделайте ввод информации удобным

Пусть пользователь автоматически переходит к заполнению следующего поля после нажатия Return. Чем меньше нажатий пользователь делает, тем лучше.

Упрощайте ввод информации

Выбирайте самый подходящий тип ввода информации для каждого сценария. Используйте элементы, которые подсказывают пользователю, как заполнять те или иные поля.

Предложите визуальный календарь для выбора даты

Пользователи не должны проверять календарь, чтобы просто увидеть дату и сопоставить число и день недели. Используйте календарь-виджет, где это возможно.

 

Минимизируйте ошибки в формах

Предположите содержание поля там, где это возможно. Помечайте поля, где требуется правка формы ответа.

Повышайте КПД дизайна

Активно используйте автозаполнение: например, пусть пользователи вносят информацию в  формы с предварительно заполненной датой. Вносите сами известную вам информацию в поля.

Юзабилити и форм-фактор

Воспользуйтесь мелочами, которые усиливают возможности сайта.

Оптимизируйте ваш сайт

Используйте качественный макет, который учитывает размер и возможности устройства пользователя. Участники исследования посчитали, что сайты для мобильных устройств труднее использовать.  

Не заставляйте пользователей работать с неудобными им масштабированием и прокруткой

Пользователям комфортнее в использовании сайты с вертикальной прокруткой, а не с горизонтальной. Избегайте больших элементов с фиксированной шириной. Используйте мультимедийные запросы CSS, чтобы разные экраны были выполнены в разной стилистике. Не создавайте контент, который хорошо отображается только на экране определенного размера. Использование горизонтальной прокрутки может негативно сказаться на выдаче сайта в поиске.

Добавьте возможность увеличить фотографию продукта

Клиенты интернет-магазина хотят увидеть фото продукта в высоком разрешении. Участники исследования были недовольны, когда не могли разглядеть, что они покупают.

Продумайте удобную возможность увеличить фотографию товара, чтобы упростить пользователям просмотр деталей.

Подскажите пользователям, какая ориентация экрана лучше подходит для просмотра сайта

Участники использовали для просмотра одну ориентацию экрана, к которой привыкли, пока не получали подсказку изменить ее. Продумайте горизонтальную и вертикальную ориентацию экрана и подсказывайте пользователям, когда какую из них лучше использовать. При этом пользователи не должны потерять возможность совершить необходимые им действия, если проигнорируют вашу подсказку и не изменят ориентацию экрана.

Пусть у пользователя будет одно окно в браузере

У пользователей могут возникнуть проблемы с переключением между окнами и они могут не вернуться на сайт. Избегайте призывов к действию, которые уводят пользователя в новое окно. Продумайте, что может заставить пользователя покинуть страницу и старайтесь, чтобы максимум необходимых действий он совершал при помощи вашего сайта.

Избегайте надписи «Полная версия сайта»

Когда участники видели ссылку «Полная версия», они думали, что в мобильной версии не хватает нужных им функций и выбирали десктопную версию для работы.

Объясните пользователю, почему вам важно знать его местонахождение

Пользователи всегда должны понимать, зачем вы спрашиваете те или иные данные, в частности, их местоположение. Они часто негативно воспринимают запрос местонахождения на домашней странице сайта сразу после его загрузки. Участники исследования пытались забронировать отель и были недовольны, когда сайт, определив их местонахождение, показал отели в их городе. Оставьте поле местонахождения по умолчанию пустым и позвольте пользователям выбрать отель по кнопке «Рядом со мной».

Пройти обучение

20 апр 18, 18:28
0 0
Статистика 1
Показы: 1 Охват: 0 Прочтений: 0

Улучшить интерфейс за счёт мелочей: 7 хитростей

Перевод материала разработчика Адама Ватана и дизайнера Стива Щёгера, который сделал наш читатель, Виталий Асташкин.

Каждый веб-разработчик неизбежно приходит к моменту, когда приходится принимать важные решения по визуальному дизайну. Может быть, в вашей компании нет дизайнера на полную ставку, и поэтому вам приходится самостоятельно внедрять интерфейс новой функциональности. А может, вы взялись за сторонний проект и хотите, чтобы он выглядел лучше, чем ещё один сайт, созданный с помощью Bootstrap. Легко сдаться и сказать, что вы неспособны это сделать, потому что вы не художник. Но, оказывается, существует множество приёмов, которые не требуют опыта в графическом дизайне. Ниже приведены семь простых идей, которые помогут улучшить дизайн веб-страницы.

1. Используйте цвет и толщину шрифта для передачи иерархической структуры текста

Распространённая ошибка — слишком сильно полагаться на размер шрифта, работая с иерархией при стилевом оформлении текста. «Текст важный? Давайте сделаем его покрупнее». «Это второстепенный текст? Давайте уменьшим шрифт». Вместо того чтобы всю самую тяжёлую работу перекладывать только на шрифт, попробуйте выполнить ту же работу за счёт цветов или толщины шрифта. «Текст важный? Давайте сделаем шрифт потолще». «Это второстепенный текст? Давайте возьмём более светлый цвет». Попробуйте придерживаться двух или трёх цветов:

• Тёмный (но не чёрный) цвет для основного текстового контента (например, заголовок статьи).

• Серый для второстепенного текстового контента (дата публикации статьи).

• Светло-серый для вспомогательного контента (пример — предупреждение об авторском праве в сноске). В работе веб-интерфейсом полезно играть с толщиной шрифта:

• Шрифт нормальной толщины (400 или 500, зависит от начертания) — для основной части текста.

• Более толстый шрифт (600 или 700) — для текста, который вы хотите выделить. Не берите шрифты толщиной меньше 400 для работы с пользовательским интерфейсом. Они могут неплохо работать с крупными буквами заголовка, но если буквы маленькие, их сложно читать. Если надо показать незначительность текста, не уменьшайте его толщину — лучше используйте светлый оттенок или шрифт меньшего размера.

2. Не делайте серый текст на цветном фоне

Светло-серый текст на белом фоне хорошо подходит, если вы хотите, чтобы текст не привлекал внимание читателя. Но на цветном фоне светло-серый текст уже смотрится плохо. Так происходит из-за уменьшения контраста. Выстроить иерархию в тексте позволяет приближение цвета текста к цвету фона, а не светло-серый цвет. Уменьшить контраст при работе с цветным фоном можно двумя способами.

Уменьшить прозрачность белого текста

Сделайте текст белым и увеличьте степень его прозрачности. Фон в таком случае будет немного просвечивать, а значит, текст не будет привлекать внимание читателя и не будет конфликтовать с фоном.

Вручную подобрать цвет, который будет основан на цвете фона

Этот способ работает лучше, чем увеличение степени прозрачности, если фон — это фотография или рисунок, или если увеличение прозрачности текста делает его слишком мрачным либо размытым. Выберите цвет того же оттенка, что и фон, а дальше настраивайте насыщенность и яркость, пока цвет не покажется вам правильным.

3. Смещайте тени

Чтобы тени были заметнее, вместо blur и spread добавьте вертикальное смещение. Такой эффект смотрится более естественно, потому что симулирует источник света, расположенный сверху. Мы привыкли к такому освещению в реальном мире. Это работает и со встроенной тенью, которую можно использовать в ячейках или формах ввода: Если хотите узнать больше о дизайне с тенью, Material Design Guidelines — прекрасный учебник для начинающих.

4. Меньше используйте границы

Если нужно разделить два элемента, не хватайтесь за границы, будто это единственный способ. Слишком частое использование границ может перегрузить дизайн. В следующий раз, когда решите воспользоваться границами, вспомните про одну из следующих идей.

Использовать тень в ячейке

Тень в ячейке отлично оттеняет элемент, как это сделала бы и граница, но смотрится неброско, достигает той же цели, но не так сильно отвлекает внимание.

Использовать два различных цвета фона

Чтобы разделить два расположенных рядом элемента достаточно даже небольшого отличия в цвете фона хватит. Если вы уже используете разный цвет фона в дополнение к границе, попробуйте её удалить — возможно, она вам и не нужна.

Добавить дополнительное пространство

Размещение элементов на большем расстоянии друг от друга — прекрасный способ разделить их и при этом обойтись совсем без новых деталей в интерфейсе.

5. Не увеличивайте иконки, которые должны быть маленькими

Если вы работаете над чем-то, где можно использовать большие иконки (пример — раздел «Функциональные возможности» на лендинге»), возможно, вы инстинктивно берёте бесплатный набор иконок (например, Font Awesome или Zondicons) и увеличиваете размер, пока он не покажется вам подходящим. Это векторные изображения, так что качество при масштабировании не страдает, так? Но если размер иконок был 16—24 px, после трёхкратного или четырёхкратного увеличения они не будут смотреться профессионально. У них не будет нужной детализации, так что они всегда будут казаться непропорциональными и грубыми. Если у вас есть только маленькие иконки, попробуйте вставить их в фигуру другого цвета: С одной стороны, сама иконка будет ближе к своему размеру, с другой, она займёт больше пространства на странице. А если позволяет бюджет, вы можете воспользоваться премиум-набором иконок, изначально созданных большими. Попробуйте Heroicons или Iconic.

6. Используйте цветную границу, чтобы добавить цвета в спокойный дизайн

Если вы не графический дизайнер, как добавить веб-интерфейсу визуальную изюминку, которая у дизайнеров появляется благодаря красивым фотографиям или цветным иллюстрациям? Очень простой способ — с помощью цветных границ добавить акцент в те части интерфейса, которые иначе бы смотрелись слишком бледно. Например, сбоку от предупреждения:

Или чтобы подчеркнуть активный пункт навигации:

Или даже по всей ширине вверху макета: Чтобы добавить в UI цветной прямоугольник, не нужен талант графического дизайнера. Но такой прямоугольник может придать вашему сайту более профессиональный вид. Сложно выбрать цвета? Попробуйте начать с ограниченной палитры Color Search от Dribbble, чтобы не попасть под влияние бесконечных возможностей обычной палитры цветов.

7. Не каждой кнопке нужен цветной фон

Когда пользователь может произвести много разных действий на странице, очень легко попасться в ловушку и сделать дизайн этих действий, опираясь исключительно на семантику. Шаблоны сервисов вроде Bootstrap даже поощряют это — предоставляют меню семантических стилей при выборе кнопки: «Это положительное действие? Сделайте кнопку зелёной». «Это удаление данных? Сделайте кнопку красной». Но существует более важный момент, о котором обычно забывают, — иерархия. Каждое действие на странице имеет своё место в пирамиде важности. На большинстве страниц есть одно главное действие, пара менее важных второстепенных действий и несколько редко используемых действий третьестепенной важности. Дизайн должен отражать место действий в этой иерархии:

• Основные действия должны быть очевидными. Здесь хорошо использовать высококонтрастные и ровные цвета фона.

• Второстепенные действия должны быть ровными, но не яркими. Здесь лучше всего применить стиль внешней границы элемента (Outline styles) или цвета фона с меньшей контрастностью.

• Третьестепенные действия должны быть заметны, но не навязчивы. Лучше всего здесь применить стиль ссылок. «А что с деструктивными действиями? Разве не нужно их всегда выделять красным?». Необязательно. Если деструктивное действие не является главным на этой странице, лучше сделать его в стиле второстепенного или третьестепенного действия. Приберегите такое стилевое оформление — жирный шрифт, красный цвет — для тех случаев, когда негативное действие является основным действием в интерфейсе. Например, в диалоговом окне подтверждения:


2 апр 18, 12:48
0 0
Статистика 1
Показы: 1 Охват: 0 Прочтений: 0
Показаны все темы: 6

Последние комментарии

нет комментариев
Читать

Поиск по блогу

Люди

7 пользователям нравится сайт lena2018.mirtesen.ru